<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf - 8">
        <meta name = "viewport" content="
        initial-scale= 1.0,maximum-scale=1.0,user-scalable=no">
        <title>

        </title>
        <script src="C:/Users/24098/Desktop/978-7-302-48199-7《HTML5 App应用开发教程》教辅/配套资源包/chapter06/scripts/jquery-3.1.1.min.js">
        </script>
<style>
    #mydiv{
        background-color: yellow;
        width:150px;
        height: 150px;
        float:left;
    }
    input{
        margin-left: 20px;
        margin-top: 40px;
    }
    input#btnToggle{
      width:165px;
    }
    .borderBlack{
        border:2px solid black;
    }
</style>
</head>
    <body>
        <div id = "content">
            <div id="mydiv">
            </div>
            <input type="button" value = "添加边框" id = "btnAdd"/>
            <input type= "button" value = "移除边框" id ="btnRemove"/>
            <input type= "button" value ="边框自动切换" id = "btnToggle"/>

        </div>
    

        <script>
            
            $(function(){
                var $div = $("#mydiv");
                $("#btnAdd").click(function(){
                    if(!$div.hasClass("borderBlack")){
                        $div.addClass("borderBlack");
                    };
                });
                $("#btnRemove").click(function(){
                    if($div.hasClass("borderBlack")){
                        $div.removeClass("borderBlack");
                    };
                });
                $("#btnToggle").click(function(){
                    $div.toggleClass("borderBlack");
                });
               

            });
           
        </script>

    </body>
</html>